<template>
  <div>
    <ElForm style="width: 800px; border: solid 1px red" Clabel-width="auto">
      <ElRow>
        <ElCol :span="6">
          <ElFormItem v-if="billModel.billId" label="单据编号">
            <span>{{ billModel.billId }}</span>
          </ElFormItem></ElCol
        >
        <ElCol :span="8">
          <ElFormItem label="供货人"> <ElInput v-model="billModel.supplier"></ElInput> </ElFormItem
        ></ElCol>
        <ElCol :span="10">
          <ElFormItem label="采购部门"> <ElInput v-model="billModel.applier"></ElInput> </ElFormItem
        ></ElCol>
      </ElRow>
      <ElRow>
        <ElCol :span="6">
          <ElFormItem label="订货时间">
            <ElDatePicker></ElDatePicker>
          </ElFormItem>
        </ElCol>
        <ElCol :span="6" :offset="6">
          <ElFormItem label="订货时间">
            <ElSelect>
              <ElOption label="xxx" value="yyy"></ElOption>
              <ElOption label="xxxx" value="zzz"></ElOption>
            </ElSelect>
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElDivider></ElDivider>
      <ElButton icon="Delete" size="small" type="danger" @click="removeItems()"></ElButton>
      <ElButton icon="Operation" size="small" type="success" @click="open4Add()"></ElButton>
      <!-- show summary -->

      <ElTable
        :data="billModel.items"
        @selection-change="(rows:any)=>selected=rows"
        show-summary
        :summary-method="summaryMethod"
      >
        <ElTableColumn type="selection"></ElTableColumn>
        <ElTableColumn prop="itemId" label="编号"></ElTableColumn>
        <ElTableColumn prop="title" label="品名"></ElTableColumn>

        <ElTableColumn prop="quantity" label="数量"></ElTableColumn>
        <ElTableColumn label="单价Ex" width="150px">
          <template #default="{ row }">
            <ElInputNumber size="small" v-model="row.price"></ElInputNumber>
          </template>
        </ElTableColumn>
        <ElTableColumn label="数量Ex" width="150px">
          <template #default="{ row }">
            <ElInputNumber size="small" v-model="row.quantity"></ElInputNumber>
          </template>
        </ElTableColumn>
        <ElTableColumn label="金额">
          <template #default="{ row }">
            <span>{{ (row.price * row.quantity).toFixed(2) }}</span>
          </template>
        </ElTableColumn>
      </ElTable>

      <ElDivider></ElDivider>
      <ElDescriptions>
        <ElDescriptionsItem label="经办人">{{ '张三' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="审核人">{{ '李四' }}</ElDescriptionsItem>
      </ElDescriptions>
      <ElButton @click="submit()">submit</ElButton>
    </ElForm>
    <PracThreeSupport ref="support" @post-selected="postSelected"> </PracThreeSupport>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
import PracThreeSupport from './PracThreeSupport.vue'
export default defineComponent({
  name: 'PractiseThree',
  components: { PracThreeSupport },
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      // 整体单据 领域模型或行业模型 领域专家 一般有详情items
      /* 
      bill:{
        billId:'BB001'
        title:'xxxx',
        updateDate:'',
        items:[
          {price:11,quantity:10,goodsName:"milk"},
          {price:12,quantity:12,goodsName:"rice"},
        ]
      }
      
      */
      billModel: {
        billId: 'BI100',
        applier: 'zhangsan',
        supplier: '蒙牛',
        items: [
          {
            itemId: 1,
            title: '酸奶',
            price: 11,
            quantity: 10,
            billFk: "rrrr"
          },
          {
            itemId: 2,
            title: '纯牛奶',
            price: 3,
            quantity: 22,
            billFk: 'BI100'
          },
          {
            itemId: 3,
            title: '葡萄干',
            price: 1,
            quantity: 3,
            billFk: 'BI100'
          },
          {
            itemId: 4,
            title: '牛奶',
            price: 2,
            quantity: 3,
            billFk: 'BI100'
          }
        ]
      },
      selected: []
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    removeItems() {
      console.log(this.selected)
      console.log(this.billModel.items)
      const cha = lodash.differenceBy(this.billModel.items, this.selected, 'title')
      console.log(cha)
      this.billModel.items = cha
      /*       const jiaoji = lodash.intersection([1, 2, 3], [2, 3])
      console.log(jiaoji) //[2,3]
      const bingji = lodash.union([1, 2, 3], [2, 3])
      console.log(bingji) //[1，2,3，4]
      const A = [1, 2, 3]
      const B = [2, 3]
      const AchaB = lodash.difference(A, B)
      const BchaA = lodash.difference(B, A)
      console.log(AchaB) //[1]
      console.log(BchaA) //[4] */
      // this.billModel.items -rows
    },
    summaryMethod() {
      // reduce更合适
      let sum = 0
      this.billModel.items.forEach((x) => {
        sum += x.price * x.quantity
      })
      console.log('统计金额' + sum)

      const all = []
      all[0] = '总计'
      all[6] = sum.toFixed(2)

      return all
    },
    submit() {
      ElMessage.success(JSON.stringify(this.billModel))
    },
    open4Add() {
      const support: any = this.$refs.support
      support.show()
    },
    // Array<Material>
    postSelected(selectedMaterials: any) {
      console.log('接受到的数据', selectedMaterials)
      // 改造数据 格式化
      const formatted = selectedMaterials.map((e: any) => {
        return {
          itemId: 0,
          title: e.materialLable,
          price: e.suggestPrice,
          quantity: 1,
          billFk: ''
        }
      })
      console.log('接受到的并改造完成', formatted)
      // 合并旧新
      const all = lodash.unionBy(this.billModel.items, formatted, 'title')
      console.log('新旧合并', all)

      this.billModel.items = all
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
